<template>
  <div class="showDataPanel">
    <!--    <el-table :data="tableData" style="width: 100%" max-height="250">-->
    <el-table @cell-click="celledit" class="tableView" :data="tableData" max-height="500">
      <el-table-column label="账单名称" prop="name" align="center">
        <template #default="props">
          <el-input v-if="props.row.name.edit"
                    ref="name"
                    size="small"
                    v-model="props.row.name.value"
                    style="width: 100%"
                    @blur="props.row.name.edit = false">
          </el-input>
          <span v-else>{{ props.row.name.value }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="账单开始时间" align="center">
        <template #default="props">
          <el-date-picker v-if="props.row.startTime.edit"
                          v-model="props.row.startTime.value"
                          ref="startTime"
                          style="width: 100%"
                          size="small"
                          type="datetime"
                          format="YYYY/MM/DD HH:mm:ss"
                          value-format="YYYY-MM-DD HH:mm:ss"
                          @blur="props.row.startTime.edit = false">
          </el-date-picker>
          <span v-else>{{ props.row.startTime.value }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="账单截至时间" align="center">
        <template #default="props">
          <el-date-picker v-if="props.row.endTime.edit"
                          v-model="props.row.endTime.value"
                          ref="endTime"
                          style="width: 100%"
                          size="small"
                          type="datetime"
                          format="YYYY/MM/DD hh:mm:ss"
                          value-format="YYYY-MM-DD hh:mm:ss"
                          @blur="props.row.endTime.edit = false">
          </el-date-picker>
          <span v-else>{{ props.row.endTime.value }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark">
        <template #default="props">
          <el-input v-if="props.row.remark.edit"
                    ref="remark"
                    v-model="props.row.remark.value"
                    size="small"
                    style="width: 100%"
                    @blur="props.row.remark.edit = false">
          </el-input>
          <span v-else>{{ props.row.remark.value }}</span>
        </template>
      </el-table-column>
      <el-table-column label="详情" width="200" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" style="width: 50px">电量账单</el-button>
          <el-button link type="primary" size="small"  style="width:50px">水量账单</el-button>
          <el-button link type="primary" size="small"  style="width: 50px">热量账单</el-button>
          <el-button link type="primary" size="small"  style="width: 50px">冷量账单</el-button>
          <el-button link type="primary" size="small"  style="width: 50px">流量账单</el-button>
          <el-button link type="primary" size="small"  style="width: 50px">当量账单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button class="mt-4" style="width: 100%" @click="onAddItem">Add Item</el-button>
  </div>


</template>

<script>
let component;
import moment from 'moment';

export default {
  name: "BillingBillTable",
  data() {
    return {
      tableData: [
        {
          startTime: moment().format("YYYY-MM-DD hh:mm:ss"),
          endTime: moment().subtract(1, 'days').format("YYYY-MM-DD hh:mm:ss"),
          name: 'Tom',
          remark: 'No. 189, Grove St, Los Angeles',
        },
        {
          startTime: moment().format("YYYY-MM-DD hh:mm:ss"),
          endTime: moment().subtract(1, 'days').format("YYYY-MM-DD hh:mm:ss"),
          name: 'Tom',
          remark: 'No. 189, Grove St, Los Angeles',

        },
        {
          startTime: moment().format("YYYY-MM-DD hh:mm:ss"),
          endTime: moment().subtract(1, 'days').format("YYYY-MM-DD hh:mm:ss"),
          name: 'Tom',
          remark: 'No. 189, Grove St, Los Angeles',
        }
      ],
      now: moment()
    }
  },
  methods: {
    deleteRow(index) {
      component.tableData.value.splice(index, 1)
    },
    onAddItem() {
      //当第一条数据都不为空再次添加
      if (component.tableData[0].name.value == '' || component.tableData[0].startTime.value == '' || component.tableData[0].endTime.value == '') {
        component.$message.warning("请先完善第一条计费账单");
        return;
      }
      component.tableData.unshift({
        startTime: {
          value: '',
          edit: false
        },
        endTime: {
          value: '',
          edit: false
        },
        name: {
          value: '',
          edit: false
        },
        remark: {
          value: '',
          edit: false
        }
      })
    },
    celledit(row, column, cell, event) {
      if (row[column.property]) {
        row[column.property].edit = true
        setTimeout(() => {
          this.$refs[column.property].focus()
        }, 20)
      }

    },
    gobackData() {
      this.tableData.forEach(item => {
        for (let key in item) {
          item[key] = item[key].value
        }
      })
    },
    formatData() {
      this.tableData.forEach(item => {
        for (let key in item) {
          item[key] = {
            value: item[key],
            edit: false
          }
        }
      })
    },
  },
  mounted() {
    component = this;
    component.formatData();
  }
}
</script>

<style scoped>
.el-date-editor .el-input__prefix {
  position: absolute;
  left: 1.875rem;
  top: 0;
}
</style>